<template>
  <el-select v-model="_value" placeholder="请选择" :multiple="multiple" :multiple-limit="multipleLimit" :disabled="disabled" clearable>
    <el-option v-if="type === 'week'" v-for="item in week" :key="item.value" :label="item.label" :value="item.value"></el-option>
    <el-option v-if="type === 'month'" v-for="item in month" :key="item" :label="item + '日'" :value="item"></el-option>
  </el-select>
</template>

<script>
export default {
  name: 'h-select-date',
  componentName: 'h-select-date',
  props: {
    type: {
      type: String,
      default: 'day',
      validator (value) {
        return [
          'week',
          'month'
        ].indexOf(value) > -1
      }
    },
    multiple: Boolean,
    disabled: Boolean,
    multipleLimit: {
      type: Number,
      default: 0
    },
    value: [Number, String, Array]
  },
  computed: {
    _value: {
      get () {
        return this.value
      },
      set (val) {
        console.log(val)
        this.$emit('update:value', val)
        this.$emit('change', val)
      }
    }
  },
  data () {
    return {
      week: [],
      month: []
    }
  },
  methods: {
    setWeek () {
      let i = 1
      let n = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      let tmp = []
      while (i < 8) {
        tmp.push({
          value: i,
          label: n[i - 1]
        })
        i++
      }
      this.week = tmp
    },
    setMonth () {
      let i = 1
      let tmp = []
      while (i < 32) {
        tmp.push(i)
        i++
      }
      this.month = tmp
    }
  },
  created () {
    this.setWeek()
    this.setMonth()
  }
}
</script>
